<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/home"></ion-back-button>
        </ion-buttons>
        <ion-title>消息</ion-title>
        <ion-buttons slot="end">
          <ion-button @click="markAllAsRead" fill="clear" v-if="hasUnreadMessages">
            <ion-icon :icon="checkmarkDoneOutline"></ion-icon>
            全部已读
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">消息</ion-title>
        </ion-toolbar>
      </ion-header>

      <!-- 消息统计 -->
      <div class="message-stats" v-if="unreadCount > 0">
        <ion-chip color="primary">
          <ion-icon :icon="mailUnreadOutline"></ion-icon>
          <ion-label>{{ unreadCount }} 条未读消息</ion-label>
        </ion-chip>
      </div>

      <!-- 消息列表 -->
      <div class="messages-container">
        <ion-card 
          v-for="message in messages" 
          :key="message.id" 
          class="message-card"
          :class="{ 'unread': !message.isRead }"
          @click="openMessage(message)"
        >
          <ion-card-content>
            <div class="message-item">
              <div class="message-icon">
                <ion-icon 
                  :icon="getMessageIcon(message.type)" 
                  :color="getMessageColor(message.type)"
                  size="large"
                ></ion-icon>
              </div>
              
              <div class="message-content">
                <div class="message-header">
                  <h3 class="message-title">{{ message.title }}</h3>
                  <div class="message-meta">
                    <span class="message-time">{{ formatTime(message.createdAt) }}</span>
                    <ion-badge 
                      v-if="!message.isRead" 
                      color="danger" 
                      class="unread-badge"
                    >
                      未读
                    </ion-badge>
                  </div>
                </div>
                
                <p class="message-preview">{{ message.content }}</p>
                
                <div class="message-footer">
                  <ion-chip 
                    :color="getMessageColor(message.type)" 
                    fill="outline" 
                    size="small"
                  >
                    {{ getMessageTypeName(message.type) }}
                  </ion-chip>
                </div>
              </div>
            </div>
          </ion-card-content>
        </ion-card>

        <!-- 空状态 -->
        <div class="empty-state" v-if="messages.length === 0">
          <ion-icon :icon="mailOutline" size="large" color="medium"></ion-icon>
          <h3>暂无消息</h3>
          <p>系统消息将在这里显示</p>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButtons,
  IonButton,
  IonIcon,
  IonCard,
  IonCardContent,
  IonChip,
  IonLabel,
  IonBadge,
  IonBackButton,
  alertController,
  toastController
} from '@ionic/vue'
import {
  checkmarkDoneOutline,
  mailUnreadOutline,
  mailOutline,
  homeOutline,
  shieldCheckmarkOutline,
  documentTextOutline,
  informationCircleOutline,
  warningOutline,
  checkmarkCircleOutline
} from 'ionicons/icons'

// 消息类型定义
interface SystemMessage {
  id: number
  type: 'verification' | 'property' | 'system' | 'warning' | 'success'
  title: string
  content: string
  createdAt: string
  isRead: boolean
}

const router = useRouter()

// 消息列表
const messages = ref<SystemMessage[]>([
  {
    id: 1,
    type: 'verification',
    title: '房东认证审核通过',
    content: '恭喜您！您的房东认证已通过审核，现在可以发布房源信息了。请确保房源信息真实有效，遵守平台规定。',
    createdAt: '2024-01-15T10:30:00Z',
    isRead: false
  },
  {
    id: 2,
    type: 'property',
    title: '房源发布成功',
    content: '您发布的房源"阳光小区三室两厅"已成功上线，租客现在可以搜索到您的房源。建议及时回复租客咨询。',
    createdAt: '2024-01-14T16:45:00Z',
    isRead: false
  },
  {
    id: 3,
    type: 'system',
    title: '五月租房返现活动',
    content: '五月租房返现活动正在进行中！成功出租房源最高可获得4000元返现，活动截止到5月31日。',
    createdAt: '2024-01-13T09:15:00Z',
    isRead: true
  },
  {
    id: 4,
    type: 'warning',
    title: '房源信息需要更新',
    content: '您的房源"市中心公寓"已超过30天未更新，建议及时更新房源状态和价格信息。',
    createdAt: '2024-01-12T14:20:00Z',
    isRead: true
  },
  {
    id: 5,
    type: 'success',
    title: '租赁合同签署成功',
    content: '您与租客张先生的租赁合同已成功签署，租期从2024年2月1日至2025年1月31日。',
    createdAt: '2024-01-11T11:00:00Z',
    isRead: true
  }
])

// 计算未读消息数量
const unreadCount = computed(() => {
  return messages.value.filter(msg => !msg.isRead).length
})

// 是否有未读消息
const hasUnreadMessages = computed(() => {
  return unreadCount.value > 0
})

// 获取消息图标
const getMessageIcon = (type: string) => {
  const icons = {
    verification: shieldCheckmarkOutline,
    property: homeOutline,
    system: informationCircleOutline,
    warning: warningOutline,
    success: checkmarkCircleOutline
  }
  return icons[type as keyof typeof icons] || informationCircleOutline
}

// 获取消息颜色
const getMessageColor = (type: string) => {
  const colors = {
    verification: 'success',
    property: 'primary',
    system: 'tertiary',
    warning: 'warning',
    success: 'success'
  }
  return colors[type as keyof typeof colors] || 'medium'
}

// 获取消息类型名称
const getMessageTypeName = (type: string) => {
  const names = {
    verification: '认证消息',
    property: '房源消息',
    system: '系统公告',
    warning: '提醒消息',
    success: '成功消息'
  }
  return names[type as keyof typeof names] || '系统消息'
}

// 格式化时间
const formatTime = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))
  
  if (diffInHours < 1) {
    return '刚刚'
  } else if (diffInHours < 24) {
    return `${diffInHours}小时前`
  } else if (diffInHours < 48) {
    return '昨天'
  } else {
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric'
    })
  }
}

// 打开消息详情
const openMessage = async (message: SystemMessage) => {
  // 标记为已读
  if (!message.isRead) {
    message.isRead = true
  }

  // 显示消息详情
  const alert = await alertController.create({
    header: message.title,
    message: message.content,
    buttons: ['确定']
  })
  await alert.present()
}

// 标记全部为已读
const markAllAsRead = async () => {
  messages.value.forEach(msg => {
    msg.isRead = true
  })

  const toast = await toastController.create({
    message: '所有消息已标记为已读',
    duration: 2000,
    color: 'success',
    position: 'top'
  })
  await toast.present()
}

onMounted(() => {
  // 页面加载时可以从API获取消息列表
  console.log('消息列表页面已加载')
})
</script>

<style scoped>
.message-stats {
  padding: 16px;
  padding-bottom: 0;
}

.messages-container {
  padding: 16px;
  padding-top: 8px;
}

.message-card {
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.message-card:hover {
  transform: translateY(-2px);
}

.message-card.unread {
  border-left: 4px solid var(--ion-color-primary);
}

.message-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.message-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ion-color-light);
  border-radius: 50%;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.message-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
  flex: 1;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.message-time {
  font-size: 12px;
  color: var(--ion-color-medium);
}

.unread-badge {
  font-size: 10px;
}

.message-preview {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--ion-color-medium);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-footer {
  display: flex;
  justify-content: flex-start;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ion-color-medium);
}

.empty-state h3 {
  margin: 16px 0 8px 0;
  font-size: 18px;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}
</style>
